<template>
  <div id="app">
    <h1 ref="hh">{{ msg }}</h1>
    <!-- 使用组件 -->
    <!-- 在App这个父组件中，找到子组件Car，然后给Car这个子组件传数据：通过属性的方式 -->
    <Car brand="宝马" :price="10" color="黑色" ref="car1" /> <!-- 使用ref给组件打上标记 -->
    <hr />
    <Car brand="比亚迪汉" :price="20" color="红色" ref="car2" />
    <hr />
    <button @click="printCarInfo">打印汽车信息</button>
  </div>
</template>

<script>
import Car from './components/Car.vue'

export default {
  name: 'App',  // 设置Vue开发者工具中显示的组件的名
  data() {
    return {
      msg: '汽车信息'
    }
  },
  methods: {
    printCarInfo() {
      // 获取子组件
      console.log(this.$refs.car1)
      console.log(this.$refs.car1.brand)

      // 也可获取dom元素
      console.log(this.$refs.hh)
      console.log(this.$refs.hh.innerText)

    }
  },
  // 注册组件
  components: {
    Car
  }
}
</script>
